<template>
  <basic>
    <view slot="page">
      <view class="u-mg-t-16rp u-pd-tb-15rp u-btn u-btn-success" @click="goto">go to p3</view>
      <view v-for="(item, index) in imgzu" :key="index" @click="yulan(index, imgzu)" class="tutu">
        <image :src="item" mode="widthFix"></image>
      </view>
      2张
      <view v-for="(item, index) in img2" :key="index + '22'" @click="yulan2(index, img2)" class="tutu">
        <image :src="item" mode="widthFix"></image>
      </view>
    </view>
  </basic>
</template>

<script>
export default {
  data() {
    return {
      imgzu: ["https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/42166d224f4a20a46b610b709b529822720ed00d.jpg", "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic5.nipic.com%2F20100225%2F1399111_094253001130_2.jpg&refer=http%3A%2F%2Fpic5.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620543122&t=d99ea488f8d29c35620dde47da98b44d"],
      img2: ["https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic5.nipic.com%2F20100225%2F1399111_094253001130_2.jpg&refer=http%3A%2F%2Fpic5.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620543122&t=d99ea488f8d29c35620dde47da98b44d"]
    };
  },
  onReady() {},
  methods: {
    goto() {
      this.$_router.path("/pages/index/p3");
    },
    yulan(index, urls) {
      uni.previewImage({
        current: index,
        urls: urls,
        loop: true
      });
    },
    yulan2(index, urls) {
      uni.previewImage({
        current: index,
        urls: urls,
        loop: true
      });
    }
  }
};
</script>

<style>
.tutu {
  height: 200upx;
  width: 200upx;
}
.tutu image {
  height: 100%;
  width: 100%;
}
</style>
